// 配置路由表
import React, { Suspense } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { getToken } from "../utils/token";
import { Progress } from "antd"; // 引入Ant Design的Progress组件

// 定义加载中的进度条组件
const Fallback = () => (
  <div style={{ padding: '20px' }}>
    <Progress
      percent={50}
      status="active"
      strokeColor={{ from: '#108ee9', to: '#87d068' }}
      showInfo={false}
    />
  </div>
);

// 异步加载的页面组件
const Layout = React.lazy(() => import('../pages/layout'));
const Home = React.lazy(() => import('../pages/home'));
const Chat = React.lazy(() => import('../pages/chat'));
const ThreeD = React.lazy(() => import('../pages/3D'));
const Login = React.lazy(() => import('../pages/login'));
const Vr = React.lazy(() => import('../pages/VR'));
const Notify = React.lazy(() => import('../pages/notify'));

// 白名单列表
const whiteList = ['/login'];

// 路由守卫
const ReguardRouter = ({ children }: { children: React.ReactNode }) => {
  const location = useLocation();
  const token = getToken();
  
  if (!token && !whiteList.includes(location.pathname)) {
    return <Navigate to="/login" replace />;
  }
  
  return <>{children}</>;
};

// 二级路由
export const secondRoutes = [
  {
    path: "chat",
    element: (
      <Suspense fallback={<Fallback />}>
        <ReguardRouter>
          <Chat />
        </ReguardRouter>
      </Suspense>
    ),
  },
  {
    path: "vr",
    element: (
      <Suspense fallback={<Fallback />}>
        <ReguardRouter>
          <Vr />
        </ReguardRouter>
      </Suspense>
    ),
  },
];

// 一级路由
export const routes = [
  // 重定向
  {
    path: '/',
    element: <Navigate to="/home" />,
  },
  {
    path: '/layout',
    element: (
      <Suspense fallback={<Fallback />}>
        <ReguardRouter>
          <Layout />
        </ReguardRouter>
      </Suspense>
    ),
    children: secondRoutes,
  },
  {
    path: '/home',
    element: (
      <Suspense fallback={<Fallback />}>
        <ReguardRouter>
          <Home />
        </ReguardRouter>
      </Suspense>
    ),
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<Fallback />}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: '/notify',
    element: (
      <Suspense fallback={<Fallback />}>
        <Notify />
      </Suspense>
    ),
  },
  // 404
  {
    path: '*',
    element: (
      <Suspense fallback={<Fallback />}>
        <h1>页面资源未找到-404</h1>
      </Suspense>
    ),
  },
  {
    path: '/3D',
    element: (
      <Suspense fallback={<Fallback />}>
        <ReguardRouter>
          <ThreeD />
        </ReguardRouter>
      </Suspense>
    ),
  },
];